<template>
  <div class="hold-info">
    <div class="content">
      <div v-if="isDetail" class="title">持有详情</div>
      <el-form :model="form" ref="formRef" inline label-width="80px">
        <el-form-item label="类型" prop="type" required>
          <el-select v-model="form.type" :disabled="isDetail" placeholder="请选择">
            <el-option
              v-for="(item, index) in TYPE_LIST"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属策略" prop="strategyId" required>
          <SelectStrategy v-model:id="form.strategyId" :disabled="isDetail" />
        </el-form-item>
        <el-form-item label="所属平台" prop="platformId" required>
          <SelectPlatform v-model:id="form.platformId" :disabled="isDetail" />
        </el-form-item>
        <el-form-item label="所属分类" prop="categoryId" required>
          <SelectCategory v-model:id="form.categoryId" :disabled="isDetail" />
        </el-form-item>
        <el-form-item label="名字" prop="name" required>
          <el-input v-model="form.name" :disabled="isDetail" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="代码" prop="code" :required="form.type !== 'currency'">
          <el-input v-model="form.code" :disabled="isDetail" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="持仓数量" prop="holdNum" required>
          <el-input v-model="form.holdNum" :disabled="isDetail" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="持仓单价" prop="holdPrice" required>
          <el-input v-model="form.holdPrice" :disabled="isDetail" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div v-if="isDetail && currentRecordList?.length" class="title">交易记录</div>

      <div v-if="isDetail" class="record-list">
        <ExchangeInfo
          v-for="item in currentRecordList"
          :info="form"
          :key="item.createTime"
          :record="item"
          disabled
        />
      </div>
    </div>

    <div class="btn-area">
      <el-button @click="emit('close')">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确认</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import ExchangeInfo from './ExchangeInfo.vue'
import SelectCategory from '@/components/SelectCategory/index.vue'
import SelectPlatform from '@/components/SelectPlatform/index.vue'
import SelectStrategy from '@/components/SelectStrategy/index.vue'

import { ref, computed } from 'vue'
import { TYPE_LIST } from './model'

import { useList } from '@/hooks/useList'

import type { HoldItem } from '@/indexDB/initHold'
import type { ExchangeItem } from '@/indexDB/initExchange'
import type { AimType } from '@/hooks/useTable'

const props = defineProps<{
  info: HoldItem
  aim: AimType
}>()

const form = ref<HoldItem>({
  ...props.info
})

const isDetail = computed(() => {
  return props.aim === 'detail'
})

const emit = defineEmits(['close', 'confirm'])

const formRef = ref()
const handleConfirm = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      if (props.aim === 'add') {
        form.value.createTime = new Date().getTime() + ''
        form.value.id = new Date().getTime() + ''
      }

      if (props.aim === 'edit') {
        form.value.updateTime = new Date().getTime() + ''
      }

      emit('confirm', form.value)
    }
  })
}

const { list: recordList } = useList<ExchangeItem>({
  listKey: 'exchangeList'
})

const currentRecordList = computed(() => {
  return recordList.value?.filter((each) => each.holdId === props.info.id).reverse()
})
</script>

<style lang="scss" scoped>
.hold-info {
  max-height: 500px;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow-y: auto;
  }
  .title {
    margin-bottom: 10px;
    font-size: 26px;
    font-weight: 400;
  }
  .btn-area {
    text-align: end;
  }
  :deep(.el-input) {
    width: 200px;
  }
}
</style>
